<template>
  <div>
    <van-nav-bar
      title="评论"
      :fixed="true"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="main">
      <!-- 下拉刷新时会触发 refresh 事件，
      在事件的回调函数中可以进行同步或异步操作，
      操作完成后将 v-model 设置为 false，表示加载完成。 -->
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <!-- List 组件通过 loading 和 finished 两个变量控制加载状态，
      当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。
      此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。
      若数据已全部加载完毕，则直接将 finished 设置成 true 即可。 -->
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="obj in commentList" :key="obj.user.userId">
            <template #title>
              <div class="wrap">
                <div class="img_wrap">
                  <img :src="obj.user.avatarUrl" alt="" />
                </div>
                <div class="content_wrap">
                  <div class="header_wrap">
                    <div class="info_wrap">
                      <p>{{ obj.user.nickname }}</p>
                      <p>{{ obj.timeStr }}</p>
                    </div>
                    <div>{{ obj.likedCount }}点赞</div>
                  </div>
                  <div class="footer_wrap">
                    {{ obj.content }}
                  </div>
                </div>
              </div>
            </template>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
export default {
  name: "Comment",
  setup() {
    const store = useStore();
    const route = useRoute();

    // 获取评论数据
    let commentList = ref([]); //评论
    let page = ref(1); //当前第几页
    const getList = async function () {
      // 获取评论
      await store.dispatch("comment/getcommentList", {
        id: route.query.id,
        limit: 20,
        // offset - 分页
        offset: (page.value - 1) * 20, //这个20必须和limit一致
      });
      store.state.comment.commentList.forEach((obj) =>
        commentList.value.push(obj)
      );
      //commentList.value = store.state.comment.commentList;
      //console.log("歌曲评论", commentList.value);
      isLoading.value = false; //刷新页面结束
      loading.value = false; //每次请求数据都要包loading关闭，否则不会再次触发onload
    };
    onMounted(() => {
      getList();
    });

    //下拉刷新评论
    let isLoading = ref(false); //加载完毕
    const onRefresh = async function () {
      // 当你UI层面手动下拉，内部会自动把isLoading改成true(开始加载小圆圈)
      commentList.value = []; //再去获取新的数据
      page.value = 1; //刷新好重新定义到第一页
      getList();
    };

    //上拉加载更多
    const loading = ref(false);
    const finished = ref(false);
    const onLoad = () => {
      // 加载后要关闭loading:false
      // 隐藏：网页刚刚打开list组件就相当于触底了，马上执行了移除onload事件
      page.value++; //页码加一
      getList();

      // 数据全部加载完成
    };

    return { commentList, isLoading, onRefresh, loading, finished, onLoad };
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-top: 46px;
}
// 容器样式
.wrap {
  display: flex;
}
.img_wrap {
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.266667rem;
}
.img_wrap img {
  width: 100%;
  height: 100%;

  border-radius: 50%;
}
.content_wrap {
  flex: 1;
}
// 右侧头部
.header_wrap {
  display: flex;
}
.info_wrap {
  flex: 1;
}
.info_wrap p:first-child {
  font-size: 0.373333rem;
  color: #666;
}
.info_wrap p:last-of-type {
  font-size: 0.24rem;
  color: #999;
}
.header_wrap div:last-of-type {
  font-size: 0.293333rem;
  color: #999;
}
// 评论内容
.footer_wrap {
  font-size: 0.4rem;
  color: #333;
}
</style>
